<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col>
          <div class="loan-wrap right-content">
            <el-breadcrumb v-if="!id" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/companyEdit' }">我的公司</el-breadcrumb-item>
              <el-breadcrumb-item>股权信息</el-breadcrumb-item>
            </el-breadcrumb>
            <el-breadcrumb v-if="id" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/bankBankOrderHand' }">我的订单</el-breadcrumb-item>
              <el-breadcrumb-item>股权信息</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="wrap">
              <rotate-message></rotate-message>
              <div class="wrap-container">
                <div class="title">股权信息
                    <div v-if="!id" @click="addBtn" class="btn">添加</div>
                </div>
                <div class="loan-content">
                    <div class="wrap">
                        <div class="wrap-container">
                            <div class="table-wrap">
                                <el-table
                                    :data="tableData"
                                    border
                                    style="width: 100%">
                                    <el-table-column
                                    prop="masterName"
                                    align="center"
                                    label="股东名称">
                                    </el-table-column>
                                    <el-table-column label="占股比例" align="center">
                                        <template slot-scope="scope">
                                            {{scope.row.stockRate}}%
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                    label="认缴金额(万元)"
                                    align="center"
                                    prop="stockAmount">
                                    </el-table-column>  
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button v-if="!id" @click="editBtn(scope.row.id)" size="small" type="success">编辑</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <el-dialog center title="股权信息" :visible.sync="dialogFormVisible">
                        <el-form :model="information" :rules="rules" ref="information">
                            <el-form-item  prop="masterName" label="股东名称:" :label-width="formLabelWidth">
                                <el-input
                                v-model="information.masterName"
                                clearable>
                                </el-input>
                            </el-form-item>
                            <el-form-item  prop="stockRate" label="占股比例:" :label-width="formLabelWidth">
                                <el-input
                                v-model.number="information.stockRate"
                                clearable>
                                </el-input>
                                <span style="margin-left:10px">%</span>
                            </el-form-item>
                            <el-form-item  prop="stockAmount" label="认缴金额:" :label-width="formLabelWidth">
                                <el-input
                                v-model.number="information.stockAmount"
                                clearable>
                                </el-input>
                                <span style="margin-left:10px">万</span>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button :loading="btnState"  type="primary" @click="submitBtn('information')">{{btnState?'提交中':'提交'}}</el-button>
                        </div>
                    </el-dialog>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js');
import VueRouter from 'vue-router'
export default {
  data(){
    var validateNum =  (rule, value, callback) => {
        var reg= /^(-?\d+)(\.\d{1,2})?$/
        if (!reg.test(value)){ return callback(new Error('请保留两位小数')); }
        callback();
    };
    return{
      href:'',
      id:'',
      checkList:'是',
      date:'',
      dialogFormVisible:false,
      formLabelWidth:'150px',
      tableData: [],
      financeArr:[],
      masterArr:[],
      fileList: [],
      giveArr:[],
      btnState:false,
      id:'',
      information: {
        id:'',
        masterName:'',
        stockAmount:'',
        stockRate :'',
        userId:''
      },
      name:'',
      rules: {
            // masterName:[
            //     {required: true, message: '请输入股东名称', trigger: 'change'  }
            // ],
            // stockAmount: [
            //     { required: true, message: '请输入认缴金额', trigger: 'blur' },
            //     { type: 'number', message: '认缴金额必须为数字值'},
            //     {  validator: validateNum, trigger: 'blur' }
            // ],
            // stockRate:[
            //     {required: true, message: '请输入占股比例', trigger: 'change'  },
            //     { type: 'number', message: '占股比例必须为数字值'},
            //     {  validator: validateNum, trigger: 'blur' }
            // ]
     },
    }
  },
  components: {
    'menu-top':() => import('../../common/Menu-Top'),
    'menu-left':() => import('../../common/Menu-Left'),
    "rotate-message": () => import("../../common/rotate-message")
  },  
  created(){
      this.id = this.$router.currentRoute.query.id;
  },
  mounted(){
      this.getProductPage()
  },
  methods:{
      addBtn(){
          this.information={
            id:'',
            masterName:'',
            stockAmount:'',
            stockRate :'',
            userId:''
          }
          this.fileList = []
          this.dialogFormVisible = true;
      },
      editBtn(id){
          this.tableData.map((item)=>{
              if(item.id == id){
                  this.information = item
              }
          })
          this.dialogFormVisible = true;
      },
      submitBtn(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let url = CONSTANT.URL.WEB.SAVESTOCKLIST;
                this.information.userId = this.id
                let param = JSON.stringify(this.information);
                this.btnState = true;
                common.requestAjax(url, param, null, res => {
                    if(res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.dialogFormVisible = false;
                        this.information={
                            id:'',
                            masterName:'',
                            stockAmount:'',
                            stockRate :'',
                            userId:''
                        }
                        this.btnState = false;
                        this.getProductPage()
                    } else {
                        this.btnState = false;
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                });
            } else {
                return false;
            }
            });
     },
      getProductPage(){
          let api;
            if(this.id){
                api =  CONSTANT.URL.CHANNEL.FINDSTOCKLIST
            }else{
                api =  CONSTANT.URL.WEB.FINDSTOCKLIST
            }
          
            let  url =api,
                data = {},
                dataForm = {
                    pageIndex:1,
                    pageSize:100,
                    userId:this.id?this.id:''
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.tableData = res.data.bussData;
                    }else{
                    }
                })
        },
  },
  watch: {  
      $route(to, from) {  
        // this.$refs.left.activePath()
      }  
  }
}
</script>
<style lang="scss">

.equity-detail{
    .el-dialog__body{
        .el-form-item__error {
            top: 100%;
            left: 0%;
        }
    }
}
</style>

<style  lang="scss" scoped>
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}
.equity-detail{
    .el-dialog__body{
        .el-form-item__error {
            top: 100%;
            left: 0%;
        }
    }
    header {
        margin: 19px 0;
        font-size: 14px;
        color: #333;
        a {
            color: #999;
        }
    }
    .focus-pointer {
        font-size: 14px;
        height: 70px;
        line-height: 70px;
        background-color: #fff;
        padding-left: 18px;
        white-space: nowrap;
    }
}

.loan-wrap{
  padding-top: 29px;
  header {
        margin: 19px 0;
        font-size: 14px;
        color: #333;
        a {
            color: #999;
        }
    }
  .wrap{
    background-color: #f5f5f5;
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .el-table__row{
        td{
            height: 50px;
            padding: 0;
        }
    }
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .title{
        padding-bottom: 18px;
        padding-top: 10px;
        span{
            color: #111;
            font-weight: bold;
        }
        .btn{
            display: inline-block;
            width: 73px;
            height: 40px;
            margin-left: 41px;
            background-color: #ED7018;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            &:hover{
                background-color: #ED9000;
                transition:all .2s linear
            } 
        }
      }

    }
  }
.el-button--primary{
        border-radius: 4px;
        -webkit-border-radius: 4px;
        background-color: #ED7018;
        border: 0PX;
        &:hover{
        background-color: #ED9000;
        transition:all .2s linear
        } 
}
  .el-dialog__body{
      .el-input{
          width: 60%;
      }
      .el-select{
            width: 60%;
            &.fund{
                width:100px;
            }
        }
  }
}

a{
  text-decoration: none;
}
</style>